<template>
  <el-card class="report-card">
    <template #header>
      <div class="card-header">
        <span>能力评估报告</span>
        <el-tag
          :type="result.suitable ? 'success' : 'warning'"
          class="status-tag"
        >
          {{ result.suitable ? "适合" : "需提升" }}
        </el-tag>
      </div>
    </template>

    <div class="report-content">
      <!-- 综合评分 -->
      <div class="overall-score">
        <h3>综合匹配度</h3>
        <el-progress
          type="circle"
          :percentage="Math.round(result.overallMatchScore * 10)"
          :status="getProgressStatus(result.overallMatchScore)"
          :color="getProgressColor(result.overallMatchScore)"
        />
        <p class="score-text">
          得分: {{ result.overallMatchScore.toFixed(1) }}/10
        </p>
      </div>

      <!-- 维度匹配详情 -->
      <div class="dimension-analysis">
        <h3>维度匹配分析</h3>
        <el-table :data="result.dimensionMatches" style="width: 100%">
          <el-table-column prop="dimensionName" label="评估维度" width="120" />
          <el-table-column prop="currentValue" label="当前值" width="120" />
          <el-table-column prop="requiredValue" label="要求值" width="620" />
          <el-table-column prop="matchScore" label="匹配分数" width="150">
            <template #default="scope">
              <el-progress
                :percentage="Math.round(scope.row.matchScore * 10)"
                :show-text="false"
                :color="getProgressColor(scope.row.matchScore)"
              />
              <span style="margin-left: 10px">{{
                scope.row.matchScore.toFixed(1)
              }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="weight" label="权重" width="80">
            <template #default="scope">
              {{ (scope.row.weight * 100).toFixed(0) }}%
            </template>
          </el-table-column>
          <el-table-column label="匹配状态" width="100">
            <template #default="scope">
              <el-tag :type="scope.row.matched ? 'success' : 'danger'">
                {{ scope.row.matched ? "符合" : "不符合" }}
              </el-tag>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!-- 优势与待提升项 -->
      <div class="strengths-weaknesses">
        <el-row :gutter="20">
          <el-col :span="12">
            <div class="strengths">
              <h3>✅ 优势项</h3>
              <el-card shadow="never">
                <ul class="advantage-list">
                  <li
                    v-for="item in result.advantages"
                    :key="item"
                    class="advantage-item"
                  >
                    {{ item }}
                  </li>
                </ul>
              </el-card>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="weaknesses">
              <h3>📈 待提升项</h3>
              <el-card shadow="never">
                <ul class="improvement-list">
                  <li
                    v-for="item in result.improvements"
                    :key="item"
                    class="improvement-item"
                  >
                    {{ item }}
                  </li>
                </ul>
              </el-card>
            </div>
          </el-col>
        </el-row>
      </div>

      <!-- 发展建议 -->
      <!-- <div class="suggestions">
        <h3>💡 职业发展建议</h3>
        <el-card shadow="never">
          <ul class="suggestion-list">
            <li v-for="(suggestion, index) in result.developmentSuggestions" :key="index" class="suggestion-item">
              {{ suggestion }}
            </li>
          </ul>
        </el-card>
      </div> -->

      <!-- 职业发展路径 -->
      <!-- <div v-if="result.careerPath && result.careerPath.length > 0" class="career-path">
        <h3>🚀 职业发展路径</h3>
        <el-card shadow="never">
          <ul class="career-path-list">
            <li v-for="(path, index) in result.careerPath" :key="index" class="career-path-item">
              {{ path }}
            </li>
          </ul>
        </el-card>
      </div> -->
    </div>
  </el-card>
</template>

<script>
export default {
  name: "AssessmentReport",
  props: {
    result: {
      type: Object,
      required: true,
    },
  },
  setup() {
    const getProgressStatus = (score) => {
      if (score >= 8) return "success";
      if (score >= 6) return "warning";
      return "exception";
    };

    const getProgressColor = (score) => {
      if (score >= 8) return "#67c23a";
      if (score >= 6) return "#e6a23c";
      return "#f56c6c";
    };

    return {
      getProgressStatus,
      getProgressColor,
    };
  },
};
</script>

<style scoped>
.report-card {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 16px;
  font-weight: bold;
}

.status-tag {
  font-size: 14px;
}

.overall-score {
  text-align: center;
  margin-bottom: 30px;
  padding: 20px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 8px;
  color: white;
}

.overall-score h3 {
  margin-bottom: 20px;
  color: white;
}

.score-text {
  margin-top: 15px;
  font-size: 18px;
  font-weight: bold;
}

.dimension-analysis {
  margin: 30px 0;
}

.dimension-analysis h3 {
  margin-bottom: 15px;
  color: #303133;
  font-size: 16px;
  border-left: 4px solid #409eff;
  padding-left: 10px;
}

.strengths-weaknesses {
  margin: 30px 0;
}

.strengths h3,
.weaknesses h3 {
  margin-bottom: 15px;
  color: #303133;
  font-size: 16px;
}

.advantage-list,
.improvement-list,
.suggestion-list,
.career-path-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.advantage-item,
.improvement-item,
.suggestion-item,
.career-path-item {
  padding: 12px 0;
  border-bottom: 1px solid #f0f0f0;
  line-height: 1.6;
}

.advantage-item:last-child,
.improvement-item:last-child,
.suggestion-item:last-child,
.career-path-item:last-child {
  border-bottom: none;
}

.improvement-item {
  color: #e6a23c;
}

.suggestions,
.career-path {
  margin: 30px 0;
}

.suggestions h3,
.career-path h3 {
  margin-bottom: 15px;
  color: #303133;
  font-size: 16px;
  border-left: 4px solid #409eff;
  padding-left: 10px;
}
</style>
